<template>
  <div id="app">
    <el-container>
      <el-header v-show="showHeadMenu">
        <el-menu
          v-if="isUserLogged"
          :default-active="activeIndex"
          class="admin-menu"
          router
          active-text-color="#41b883"
          mode="horizontal">
          <el-menu-item>
            <template slot="title">
              <logo class="yunque-logo"></logo>
            </template>
          </el-menu-item>
          <el-menu-item index="/dashboard" class="menu-item">工作台</el-menu-item>
          <el-menu-item index="/project" class="menu-item">项目</el-menu-item>
          <el-menu-item index="/todo" class="menu-item">任务</el-menu-item>
          <el-menu-item index="/document" class="menu-item">文档</el-menu-item>
          <el-menu-item index="/search" class="menu-item">
            <template slot="title">
              <i class="el-icon-search" title="搜索文档"></i>
            </template>
          </el-menu-item>
          <el-menu-item v-show="isAdmin" index="/admin" class="menu-item">后台</el-menu-item>
          <el-submenu index="userInfo" class="menu-item">
            <span slot="title" class="menu-item">{{ currentUserName }}</span>
            <el-menu-item index="/user/info">
              <i class="el-icon-edit-outline"></i>
              编辑个人资料
            </el-menu-item>
            <el-menu-item v-if="false" index="password">
              <i class="el-icon-lock"></i>
              修改密码
            </el-menu-item>
            <el-menu-item @click="logOut">
              <i class="el-icon-switch-button"></i>
              登出
            </el-menu-item>
            <el-popconfirm title="确定要离职吗？">
              <el-menu-item v-if="false" slot="reference" style="color: #F56C6C">
                <i class="el-icon-close"></i>
                离职
              </el-menu-item>
            </el-popconfirm>
          </el-submenu>
        </el-menu>
<!--        <div-->
<!--          v-else-->
<!--          class="header-btn-group">-->
<!--          <el-button-->
<!--            class="header-btn"-->
<!--            v-for="btn in buttons"-->
<!--            :type="btn.type"-->
<!--            @click="$router.push(btn.path)"-->
<!--            :key="btn.name">{{ btn.name }}</el-button>-->
<!--        </div>-->
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Logo from '@/components/Logo'
import {isLogged} from '@/api/login'
export default {
  name: 'App',
  components: {Logo},
  provide () {
    return {
      reload: this.reload
    }
  },
  comments: {
    Logo
  },
  data () {
    return {
      isRouterAlive: true,
      activeIndex: undefined,
      buttons: [
        {
          name: '登录',
          path: '/login',
          type: '',
          role: [
            'db',
            'super'
          ]
        },
        {
          name: '注册',
          path: '/register',
          type: 'primary',
          role: [
            'db',
            'super'
          ]
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    logOut () {
      this.$store.dispatch('LogOut', this.$store).then(() => {
        this.$notify.success({
          type: 'success',
          title: '登出成功',
          message: '用户已登出'
        })
        this.$store.dispatch('ClearCache')
        this.$router.push('/login')
      }).catch(() => {
        this.$notify.success({
          type: 'warning',
          title: '登出失败',
          message: '用户登出失败'
        })
      })
    }
  },
  computed: {
    isUserLogged () {
      return isLogged()
    },
    currentUserName () {
      let username = this.$store.getters.name
      if (!username) return '暂无用户名'
      return username.length <= 7 ? username : username.substr(0, 7) + '...'
    },
    isAdmin () {
      return false
    },
    showHeadMenu () {
      return this.$route.meta.menu
    }
  }
}
</script>

<style lang="scss">
#nprogress .bar {
  background: #3ba676 !important; // 加载进度条自定义颜色
}
.admin-menu {
  display: flex;
  justify-content: center;
}
.menu-item {
  font: 16px Medium;
}
.yunque-logo {
  width: 50px;
  margin-right: 20px;
}
.header-btn {
  padding: 0 20px;
  height: 40px;
  line-height: 1.5;
}
.header-btn-group {
  float: right;
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 20px;
}
</style>
